@charset "utf-8"; 

.evt_wrp{position: relative; width: 100%; overflow: hidden; cursor: default; letter-spacing: -0.5px;}
.evt_wrp img{vertical-align: top;}
.evt_wrp strong{font-weight: 700;}
.evt_wrp .tit,
.evt_wrp .inner{position: relative; width: fit-content; margin: 0 auto; height: unset;}
.evt_wrp .tit{padding-bottom: 50px;}

.evt_wrp .visual_wrp{background: #5d00db}
.evt_wrp .visual{background: url('https://img.megastudyacademy.co.kr/campus/mbc/event/2025/0919_cashback/bg_visual.png') no-repeat center 0;  animation: dropDown 0.6s ease-out forwards;}
.evt_wrp .visual .inner{animation: scale-down-center .3s .5s cubic-bezier(.25,.46,.45,.94) both;}

@keyframes scale-down-center{0%{transform: scale(.2); opacity: 0;} 100%{transform: scale(1)}}
@keyframes dropDown{0%{opacity: 0; transform: translateY(-100px);} 100%{opacity: 1; transform: translateY(0);}}

/* cashback */
.evt_wrp .cashback_slide{position: relative; width: 100%; height: auto; margin: 0 auto; overflow: hidden;}
.evt_wrp .cashback_slide.left{margin-top: 30px;}
.evt_wrp .cashback_slide .swiper-container{width: 100%; padding: 20px 0;}
.evt_wrp .cashback_slide .swiper-wrapper{transition-timing-function: linear !important; /* 부드러운 롤링 */}
.evt_wrp .cashback_slide .swiper-slide{width: auto !important;}
.evt_wrp .cashback_slide img{width: 100%; height: auto; display: block; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.12); border-radius: 10px;}
.floating_menu.active{right: 0;}

.evt_wrp .conts{width: 1200px; margin: 0 auto; overflow: hidden; display: flex; justify-content: center;}
.evt_wrp .conts li{position: relative;}
.evt_wrp .conts li img{max-width: unset;}

.evt_wrp .bg_02 .conts li:nth-child(2){margin: -30px 0 0 55px;}
.evt_wrp .bg_02 .conts li:nth-child(3){margin: 19px 0 0 -60px;}

.evt_wrp .bg_03 .conts{margin-top: 30px; padding: 20px;}
.evt_wrp .bg_03 .conts li{background: #fff; margin-right: 57px; padding: 50px; border-radius: 10px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);}
.evt_wrp .bg_03 .conts li:last-child{margin-right: 0;}

.evt_wrp .bg_04 li:last-child{margin-left: 120px;}

.evt_wrp .btm .inner{width: 1200px; text-align: center;}
.evt_wrp .btm .inner img{position: sticky; z-index: 2;}
.evt_wrp .btm .coin{position: absolute; top: -130px; width: max-content;}


* [class^="bg_"] {padding: 100px 0;}

.evt_wrp .bg_01{background: #efefef;}
.evt_wrp .bg_02{background: #000;}
.evt_wrp .bg_03{background: #fff;}
.evt_wrp .bg_04{background: #e9f2f3;}
.evt_wrp .btm{background: #000; padding: 83px 0;}

.evt_wrp .up-on-scroll{transition: transform .7s, opacity 1.7s;}


@keyframes blink{0%{opacity: 1} 50%{opacity:.2} 100%{opacity:1}}
@keyframes updown{ 0%{transform: translateY(-5px);} 100%{transform: translateY(5px);}}


@media screen and (min-width: 761px) {
    .evt_wrp .mo{display: none;}
}

/* 모바일 */
@media screen and (max-width: 760px) {
    .evt_wrp .pc{display: none;}
    .evt_wrp .inner{width: 90% !important; margin: 0 auto !important;}
    .evt_wrp img{width: 100%;}
    * [class^="bg_"]{padding: 12% 0;}

    .evt_wrp .visual{background-size: 120%; background-position: bottom;}

    .evt_wrp .cashback_slide img{width: 22rem;}
    .evt_wrp .cashback_slide .swiper-container{padding: 10px 0;}
    .evt_wrp .cashback_slide.left{margin-top: 20px;}

    .evt_wrp .bg_02 .conts,
    .evt_wrp .bg_04 .conts{width: 100%; display: block; margin: 0 auto;}
    .evt_wrp .bg_02 .conts li:nth-child(2){width: 95%; margin: 0;}
    .evt_wrp .bg_02 .conts li:nth-child(3){width: 95%; margin: 20px 0 0;}
    
    .evt_wrp .bg_03 .conts{margin-top: 10px; width: auto; padding: 5%; overflow-x: auto; overflow-y: hidden; white-space: nowrap; display: block; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */  -ms-overflow-style: none; /* IE and Edge */}
    .evt_wrp .bg_03 .conts li{display: inline-block; margin-right: 10px; width: auto; padding: 10% 0;}
    .evt_wrp .bg_03 .conts img{width: 80%; margin: 0 auto; display: block;}
    .evt_wrp .bg_04 li:last-child{width: 90%; margin: 30px auto 0;}

    .evt_wrp .btm .coin{width: 100%;}
    .evt_wrp .btm{padding: 20px 0;}
    .evt_wrp .btm .inner{width: 100%;}
    .evt_wrp .btm .inner img{width: 90%;}
    .evt_wrp .btm .coin {width: 131%; top: -33%; left: -19%;}
}